<template>
	<view>
		<page-title>榜单</page-title>
		<book-list :bookList="loadedBookList"></book-list>
		<uni-load-more :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	let bookListResource = {
		isLoadMore: '上拉加载显示更多',
		books: [{
				id: 1000,
				name: '《朝花夕拾》',
				synopsis: '《朝花夕拾》原名《旧事重提》，是现代文学家鲁迅的散文集，收录鲁迅于1926年创作的10篇回忆性散文...',
				imgurl: '/static/indexListImg/indexListImg4.png'
			},
			{
				id: 1001,
				name: '《人间草木》',
				synopsis: '这本书其实是汪曾祺先生的优秀散文集。汪曾祺的文字大都十分有味道，他是一个十分懂得生活的人，在当代作家中...',
				imgurl: '/static/indexListImg/indexListImg5.png'
			},
			{
				id: 1002,
				name: '《行者无疆》',
				synopsis: '15年前余秋雨开始以长途旅行方式实地考察文化。他从国内走到国外，从中华文明走到了其他文明。这期间...',
				imgurl: '/static/indexListImg/indexListImg6.png'
			},
			{
				id: 1000,
				name: '《朝花夕拾》',
				synopsis: '《朝花夕拾》原名《旧事重提》，是现代文学家鲁迅的散文集，收录鲁迅于1926年创作的10篇回忆性散文...',
				imgurl: '/static/indexListImg/indexListImg4.png'
			},
			{
				id: 1001,
				name: '《人间草木》',
				synopsis: '这本书其实是汪曾祺先生的优秀散文集。汪曾祺的文字大都十分有味道，他是一个十分懂得生活的人，在当代作家中...',
				imgurl: '/static/indexListImg/indexListImg5.png'
			},
			{
				id: 1002,
				name: '《行者无疆》',
				synopsis: '15年前余秋雨开始以长途旅行方式实地考察文化。他从国内走到国外，从中华文明走到了其他文明。这期间...',
				imgurl: '/static/indexListImg/indexListImg6.png'
			},
			{
				id: 1003,
				name: '《人类简史》',
				synopsis: '作者尤瓦尔·赫拉利为1976年生人，来自以色列。牛津大学历史学博士，现为耶路撒冷希伯来大学的历史系教授...',
				imgurl: '/static/indexListImg/indexListImg1.png'
			},
			{
				id: 1004,
				name: '《极简欧洲史》',
				synopsis: '本书作者约翰·赫斯特，为澳大利亚与英联邦权威的社会暨政治历史学家、欧洲史专家。现任墨尔本的拉筹伯大学...',
				imgurl: '/static/indexListImg/indexListImg2.png',
			},
			{
				id: 1005,
				name: '《全球通史》',
				synopsis: '作者斯塔夫里阿诺斯是美国加州大学的历史学教授，享誉世界的历史学家，曾获得过古根海姆奖、福特杰出教师奖...',
				imgurl: '/static/indexListImg/indexListImg3.png'
			}
		]
	};
	import PageTitle from '@/components/pageTitle.vue';
	import BookList from '@/components/bookList.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		data() {
			return {
				loadedBookList: [],
				loadMoreStatus: 'loading'
			}
		},
		components: {
			PageTitle,
			BookList,
			'uni-load-more': uniLoadMore
		},
		methods:{
			initLoadMore(){
				// 初始化加载
				let obj = bookListResource;
				this.loadedBookList = [...obj.books];
				setTimeout(() => {
					if(obj.books.length){
						this.loadedBookList = [...obj.books];
						this.loadMoreStatus = 'more';
					}
					
				}, 2000)
			},
			// 触底加载
			loadMore(){
				let obj = bookListResource;
				switch (obj.isLoadMore){
					case '正在加载中':
						break;
					case '没有更多了':
					    this.loadMoreStatus = 'noMore';
						break;
					case '上拉加载显示更多':
					this.loadMoreStatus = 'loading';
					    setTimeout(() => {
							this.loadedBookList = [...this.loadedBookList,...obj.books];
							this.loadMoreStatus = 'more';
						}, 3000);
						break;
					default:
						break;
				}
				
			}
		},
		onLoad() {
			this.initLoadMore();
		},
		onReachBottom(){
			this.loadMore();
		}
	}
</script>

<style>

</style>
